<template>
  <div class="goods-layout">
    <el-row :gutter="20">
      <div v-for="(item, $index) in items" >
      <el-col :span="24">
        <!-- <input type="checkbox" class="check-box" :id="item.id" :value="item.name" v-model="checkedNames" > -->

        <div class="grid-content bor-radius-10 mg-bo-10 pos-relative closed"
        v-bind:class="{selected:classItem[$index]}"
        @click="handler($index,classItem[$index])"
        >
          <!-- <span class="decorate-circle"></span> -->
          <input type="checkbox" :id="'check-' + $index" class="regular-checkbox" />
          <label :for="'check-' + $index"></label>

          <div class="card-01">
            <el-row :gutter="20">

              <el-col :span="4">
                <div class="grid-content pd">
                  <img src="../../../static/img/goods.png">
                </div>
              </el-col>

              <el-col :span="20">
                <div class="grid-content text">
                  <h6>{{ item.name }}</h6>
                  <p class="l2">{{ item.remark ||'自然清新不油腻，清爽过夏' }}</p>
                  <span>原价：{{ item.price }}</span>
                </div>
              </el-col>
            </el-row>

          </div>

          <!-- <span>Checked names: {{ checkedNames }}</span> -->

        </div>
      </el-col>
    </div>

    </el-row>
  </div>
</template>

<script>
  import cfg from '../../properties';
  import axios from '../../util/http';
  import qs from 'qs';
  export default {

    data: function () {

      return {
        items: [],
        classItem:[],
        checkedNames: []
      }
    },
    created: function () {
      let baseUrl = cfg.api_url+"/goods/";

      let self = this;

      axios.get(baseUrl)
          .then(function (res) {
              console.log(JSON.stringify(res.data));

              self.items = res.data.records;
              console.log(self.items)
          });
    },
    methods: {
       handler:function (index, isSelected) {
         console.log(index);
         console.log(isSelected);
         if(isSelected == true){
           this.$set(this.classItem,index,false);
         }else {
           this.$set(this.classItem,index,true);
         }

         console.log(this.classItem);
       }
    }

}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }


</style>
